<template>
  <div class="app-init classification">
    <div class="classification-header">
      <header-back title="分类"></header-back>
    </div>

    <div class="wrap-box">
      <!-- 左侧名称列表 -->
      <div class="left-menu absolute scroll-box" ref="left">
        <ul>
          <li class="item" v-for="(target, index) in dataItem" :key="index" :class="{ 'active': index == active }" @click="jumpToTarget(index)">{{target.name}}</li>
        </ul>
      </div>
      <!-- 右侧商品列表 -->
      <div class="right-box absolute scroll-box" ref="rightView">
        <ul>
          <li class="item" v-for="(target, index) in dataItem" :key="index">
            <p class="title">
              <span>{{target.name}}</span>
            </p>
            <div class="shop-item-wrap clear">
              <div class="shop-item" v-for="(shop, index) in target.children" :key="index" @click="$router.openPage(shop.link)">
                <p><img :src="shop.src" alt=""></p>
                <p class="name">{{shop.name}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!--  -->
    </div>
  </div>
</template>

<script>// type="text/ecmascript-6"
  import headerBack from '../components/header-back'
  import _ from 'lodash'
  import VueDB from '../util/vue-db/vue-db'

  let DB = new VueDB()

  export default{
    name: 'classification',
    data(){
      return {
        active: 0,
        dataItem: [
          {
            name: '新品',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '手机',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '电视',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '电脑',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '家电',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '路由',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '智能',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '电源',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '耳机',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '音箱',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '礼品',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '生活',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '米粉卡',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '零售店',
            children: [
              {
                name: '10X 4G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e33cb1ebca8a91a3c1031b5bae47e1da.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '10X 5G',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9238e61fd42fec7aa8b6ace4af7dbda6.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '小米10 青春',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },{
                name: 'K30 pro 变焦版',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a69571b4148f5e59c251658adae6db60.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: 'K30 pro',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/46f95bd552fa134820a7daea19e507ef.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              },
              {
                name: '黑鲨手机3',
                src: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1cae0b41b12f847c75e24513a2c432e9.png?thumb=1&w=120&h=120',
                link: '/detail/1019'
              }
            ]
          }
        ],

        offset: []
      }
    },
    components: {
      headerBack
    },
    methods: {
      jumpToTarget(index) {


        var scrollTop = this.offset[index];
        this.$refs.rightView.scrollTop = scrollTop;

        setTimeout(()=>{
          this.active = index
        }, 10)
      }
    },
    mounted() {
      //挂载后 获取sessionStorage里的数据
      var scrollDB = {
        left: DB.getItemOnce('classification-left-scrollTop').toNumber(),
        right: DB.getItemOnce('classification-right-scrollTop').toNumber()
      }
      //挂载后 加载sessionStorage里的数据 到页面
      setTimeout(()=>{
        _.forEach(this.$refs.rightView.querySelectorAll('.item'), (value, key)=>{
          this.offset.push(value.offsetHeight*key)
        })


        var mySort = this.offset;

        //监听rightView 上的scroll 对比 右侧滚动的高度 赋值

        this.$refs.rightView.addEventListener('scroll', ()=>{

          var eScrollTop = this.$refs.rightView.scrollTop;

          //循环右侧滚动位置数据 找出某一项让它等于左侧高亮

          for(var i=0; i<mySort.length; i++){
            if(eScrollTop > mySort[i]){
              this.active =  i;
            }
          }

        })
        //设置 滚动高度 进 sessionStorage
        setTimeout(()=>{
          this.$refs.left.scrollTop = scrollDB.left
          this.$refs.rightView.scrollTop = scrollDB.right
        }, 10)
      }, 100)



    },
    //路由导航首位  设置sessionStorage里的数据
    beforeRouteLeave (to, from, next) {
      DB.setItem('classification-left-scrollTop', this.$refs.left.scrollTop)
      DB.setItem('classification-right-scrollTop', this.$refs.rightView.scrollTop)
      next();
    }
  }
</script>

<style type="text/sass" lang="sass">
  @import "../assets/sass/util"
  .classification
    background-color: #fff

    .wrap-box
      position: absolute
      width: 100%
      top: getIphonese(100px)
      left: 0px
      bottom: $footerHeight

    .left-menu
      width: getIphonese(133px)
      left: 0px
      top: 0px
      bottom: 0px
      border-right: 1px solid #efefef
      overflow-x: hidden
      @include box-sizing

      ul
        padding-bottom: 0.44rem
      li.item
        margin-top: getIphonese(56px)
        text-align: center
        -webkit-transition: all .1s ease
        transition: all .1s ease
      li.item.active
        color: #fb7d34
        transform: scale(1.2)
    .right-box
      left: getIphonese(133px)
      top: 0px
      right: 0px
      bottom: 0px
      .item
        padding-top: 0.8rem
      .title
        text-align: center
        padding-bottom: 0.2rem
        span
          position: relative
          display: inline-block

          &:after,&:before
            display: inline-block
            width: getIphonese(34px)
            height: 1px
            top: 50%
            background-color: #e0e0e0
            position: absolute
            content: ''
          &:after
            left: getIphonese(-50px)
          &:before
            right: getIphonese(-50px)
      .shop-item-wrap
        .shop-item
          text-align: center
          float: left
          width: 33.3%
          color: #757575
          margin-bottom: 0.1rem
          @include f12px
          img
            width: getIphonese(80px)
            padding-bottom: 0.1rem
</style>
